import { computed, defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import Form from "@/components/Form";
import { IFormItem } from "@/components/Form/types";
import ButtonView from "@/components/ButtonView";
import CardView from "@/components/CardView";
import { useRequest } from "./request";
import BannerUploader from "@/components/BannerUploader";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import FormGroup from "@/components/FormGroup";
import * as vant from "vant";
const { showFailToast } = vant;
export default defineComponent({
  name: "",
  emits: ["back", "submit"],
  setup(_, { emit }) {
    // const form = ref({
    //   path: "",
    // });
    const { form, productList } = useRequest();
    const data = computed<FormGroupPropsData[]>(() => [
      {
        data: [
          {
            label: "农资品类",
            type: "select",
            key: "id",
            rules: [
              {
                required: true,
              },
            ],
            typeData: productList.value,
          },
        ],
      },
    ]);
    const render1 = () => {
      return <img src={form.path} class="w-full !h-[178px]" />;
      // return (
      //   <BannerUploader v-model={form.value.path} class="w-full !h-[178px]" />
      // );
    };
    const render2 = () => {
      return (
        <div class={"p-[10px]"}>
          <FormGroup data={data.value} v-model={form} class="m-child-top-20" />
          {/* <CardView title="农资说明" class="!mt-[10px]">
            xxx
          </CardView> */}
          <ButtonView
            block
            type="primary"
            onClick={() => {
              if (!form.id) {
                showFailToast("请选择农资品类");
                return;
              }
              emit("submit", form);
            }}
            class="!mt-[20px] !h-[40px]"
          >
            确定
          </ButtonView>
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="农资详情" onBack={() => emit("back")}>
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
